<template>
	<view class="ball_site">
		<view class="search_box">
			<uni-search-bar bgColor="#eee" @confirm="search" cancelButton="none" v-model="ShopName" radius="100"
				clearButton="auto" placeholder="搜索场地名称">
			</uni-search-bar>
			<view class="x-cell">
				<view class="city wap" @click="toSelectCity">
					<uni-icons type="location" color="#000" size="20"></uni-icons> {{city}}
				</view>
				<view class="x-custom" @click="chooseLocation">
					手动输入地点
				</view>
			</view>
		</view>
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			<x-scroll :fixed="true" @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="$data._freshing">
				<view v-if="list.length>0" class="list wap">
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="item_bd">
							<view class="imgbox">
								<image
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg"
									mode="" />
							</view>
							<view class="con">
								<view class="open_tiem f2 c2">
									<image src="@/static/img/icon_time@2x.png" mode="" />{{item.WorkTime||'电询'}}
								</view>
								<view class="flx">
									<view class="address f2 c2">
										<uni-icons type="location" color="#fff" size="14"></uni-icons>
										{{item.Address}}
									</view>
									<view class="distance" v-if="item.distance">距您{{item.distance.distance_str}}</view>
								</view>

							</view>
							<view class="IsOpenMember" v-if="item.IsOpenMember == 1">
								会员开放
							</view>
						</view>
						<view class="item_ft">
							<view class="left">
								<view class="login">
									<image :src="item.ShopLogo" mode="" />
								</view>
								<view class="name f1 c1 d1 pl16">{{item.ShopName}}</view>
							</view>
							<view class="right">
								<!-- <view class="price f3 c_sed pr20" v-if="item.Price > 0">¥ <text class="c_sed"
										style="font-size:34rpx">{{item.Price}}</text> 起</view>
								<view class="price f3 c_sed pr20" v-else>咨询客服</view> -->
								<view class="btn_sm" @click="selectSite(item)">选择</view>
							</view>
						</view>
					</view>
				</view>
				<view class="kong" v-else>
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png" mode="widthFix"></image>
					<view class="title">暂无场所</view>
				</view>
				
			</x-scroll>
		</block>
	<!-- 	<uni-popup ref="site" type="center">
			<view class="site">
				<view class="group">
					<view class="lab">
						约球场地
					</view>
					<view class="inp_box flx ball_space">
						<input v-model="Custom.Place" type="text" placeholder="请输入球场">
					</view>
					<view class="icon_box">
						<uni-icons type="right" size="20" color="#999"></uni-icons>
					</view>
				</view>
				<view class="group">
					<view class="lab">
						场地位置
					</view>
					<view @click="chooseLocation" class="inp_box flx ball_space">
						<input v-model="Custom.Address" type="text" disabled placeholder="请选择位置">
					</view>
					<view class="icon_box">
						<uni-icons type="right" size="20" color="#999"></uni-icons>
					</view>
				</view>

				<view class="site-btn">
					<view class="btn-cancel" @click="$refs['site'].close()"> 取消 </view>
					<view class="btn-comfirm" @click="ConfirmEvent()"> 确定</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	// import xScroll from "@/components/x-scroll/x-scroll.vue"
	import topStatus from "@/components/topStatus/topStatus.vue";
	// const citySelector = requirePlugin('citySelector');
	export default {
		components: { topStatus },
		data() {
			return {
				ShopName: "",
				golfType:'',
				load: true,
				ffreshing: true,
				selectorVisible: false,
				city: "全国",
				Latitude: null,
				Longitude: null,
				list: [],
				Custom: {
					Place: "",
					Address: '',
					Latitude: null,
					Longitude: null,
				},
				PageIndex:1,
				PageSize:10,
				islist:true,
			};
		},
		onShow() {
			// const selectedCity = citySelector.getCity();
			// if (selectedCity) {
			// 	this.city = selectedCity.fullname || this.city;
			// 	this.getList()
			// }
		},
		onLoad(e) {
			this.golfType = e.golfType;
			this.init();
		},
		mounted(){
			let _this = this;
			uni.$on('getSelectCity',(res)=>{
				_this.city = res.name;
				_this.init();
			})
		},
		onUnload(){
			uni.$off('getSelectCity');
		},
		methods: {
			search() {
				this.list = [];
				this.PageIndex = 1;
				this.getList()
			},
			toSelectCity() {
				uni.navigateTo({
					// url: `plugin://citySelector/index?key=7DCBZ-2U6KQ-XWE5N-2BK57-IBQCV-DSFJM&referer=GolfDate`,
					url: '/pages/city/cityList'
				})
			},
			// 获取定位
			getLocationSysc() {
				let _this = this;
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							resolve(res)
						},
						fail: function(err) {
							const defaultLocation = {
								latitude: 0,
								longitude: 0
							};
							resolve(defaultLocation);
						}
					});
				})

			},
			async getCity() {
				let loc = await this.getLocationSysc();
				let longitude = loc.longitude;
				let latitude = loc.latitude;
				let o = { longitude, latitude };
				this.Latitude = loc.latitude;
				this.Longitude = loc.longitude;

				let res = await this.$util.getAddress(o);

				console.log(res.result.address_component.city);
				this.t = '111'
				this.city = res.result.address_component.city;
				this.t = '222'
				console.log('----------111')
			},
			async init() {
				// await this.getCity();
				this.city =this.city==''?'全国':this.city;
				await this.getList();
				this.load = true;
			},
			async getList() {
				let cityParams = this.city == '全国'?'':this.city;
				this.golfType = ['模拟器','训练场'].includes(this.golfType)?this.golfType:''
				let res = await this.$api.post('Shops/List', {
					PageIndex: this.PageIndex,
					ShopName: this.ShopName,
					PageSize: this.PageSize,
					City:cityParams,
					ShopType:this.golfType,
				});
				// this.list = this.list.concat(res.data);
				 if(res.data.length == 0){
					this.islist = false
				}
				if(this.PageIndex == 1){
					if(res.data.length > 0){
						this.list=res.data
					}
				}else{
					if(res.data.length > 0){
						this.list = this.list.concat(res.data)
					}
				}
				 this.list.forEach(item => {
					item.distance = null;
					// item.Latitude = 23.15350;
					// item.Longitude = 113.36112;
					if (item.Latitude && item.Longitude && this.Latitude && this.Longitude) {
						item.distance = this.$util.getDistances(item.Latitude, item.Longitude, this.Latitude, this.Longitude);
					}
				  });
				return true;
			},
			//下拉刷新
			async onRefresh() {
				this.list = [];
				this.city='全国'
				if (this._freshing) return;
				this._freshing = true;
				this.PageIndex = 1;
				if (await this.getList('refresh')) {
					uni.$emit('triggered');
					this._freshing = false;
				}
			},
			//滚动到底部触发
			async scrolltolower() {
				console.log('到底了...')
				this.PageIndex++;
				this.getList();
				// if(this.order_list.length < this.count){
				// 	this.page++;
				// 	await this.getList();
				// }else{
				// 	// 都加载完了
				// 	console.log("---------148");
				// }
			},
			selectSite(item) {
				uni.$emit('site', item);
				this.nav_back();
			},
		  	chooseLocation() {
				const _this = this
			 	uni.chooseLocation({
					async success(res) {
						console.log('res-------',res);
						let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
						console.log(d);
						_this.Custom.Address = d.result.address
						_this.Custom.Longitude = res.longitude
						_this.Custom.Latitude = res.latitude
						_this.Custom.Place = res.name || d.result.address_reference.landmark_l2.title
						// _this.Custom.Place = res.name
						uni.$emit('custom', _this.Custom)
						uni.navigateBack()
					}
				});
			},
			ConfirmEvent() {
				uni.$emit('custom', this.Custom)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.kong{
	text-align: center;
	margin-top: 255rpx;
	image{
		width: 200rpx;
		height: 200rpx;
	}
	.title{
		font-size: 26rpx;
		margin-top: -29rpx;
	}

}
	.x-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.x-custom {
			padding-bottom: 20rpx;
			font-size: 28rpx;
			padding-right: 35rpx;
			text-decoration: underline;
		}
	}

	.name {
		width: 310rpx;
	}

	.ball_site {

		.search_box {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 40;
			background: #fff;
		}

		.city {
			padding-bottom: 20rpx;
		}

		/deep/ .uni-searchbar__box {
			input {
				color: #333 !important;
			}

			.uniui-search {
				// color: #FEF0BC !important;
			}

		}

		.list {
			padding-top: 160rpx;

			.item {
				margin-top: 20rpx;
				background: #262626;
				border-radius: 16rpx;
				overflow: hidden;
			}

			.item_bd {
				position: relative;
				height: 300rpx;

				.open_tiem {
					margin-bottom: 10rpx;

					image {
						height: 12px;
						width: 12px;
					}
				}

				.con {
					box-sizing: border-box;
					position: absolute;
					width: 100%;
					left: 0;
					bottom: 0rpx;
					padding-left: 20rpx;
					padding-right: 20rpx;
					padding-bottom: 22rpx;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
				}
			}

			.imgbox {
				height: 300rpx;

				image {
					height: 300rpx;
					width: 100%;
				}
			}

			.item_ft {
				display: flex;
				height: 100rpx;
				align-items: center;
				padding-left: 20rpx;
				padding-right: 20rpx;
				justify-content: space-between;

				.left,
				.right {
					display: flex;
					align-items: center;
				}
			}

			.login {
				width: 72rpx;
				height: 72rpx;
				border: 1px solid #7B7B7B;
				border-radius: 50%;
				overflow: hidden;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.pl16 {
				padding-left: 16rpx;
			}

			.pr20 {
				padding-right: 20rpx;
			}
		}
	}

	.IsOpenMember {
		position: absolute;
		top: 0;
		right: 20rpx;
		height: 132rpx;
		width: 48rpx;
		z-index: 80rpx;
		background: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17103832053521401.png') no-repeat center center;
		background-size: 48rpx 132rpx;
		font-size: 24rpx;
		color: #4C310C;
		writing-mode: vertical-rl;
		text-align: center;
		line-height: 48rpx;
	}

	.distance {
		flex-shrink: 0;
		text-align: right;
		width: 200rpx;
		font-size: 28rpx;
		text-align: right;
	}

	.flx {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.site {
		width: 650rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding-bottom: 40rpx;



		.site-btn {
			padding: 30rpx 50rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.btn-cancel {
				width: 200rpx;
				height: 65rpx;
				border-radius: 15rpx;
				color: #4C310C;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #B98B51
			}

			.btn-comfirm {
				width: 200rpx;
				height: 65rpx;
				border-radius: 15rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #4C310C;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #FEF0BC;
			}
		}

		.group {
			display: flex;
			align-items: center;
			height: 110rpx;
			border-bottom: 1px solid #ddd;
			margin-left: 30rpx;
			margin-right: 30rpx;

			&:last-child {
				border-bottom: none;
			}

			.lab {
				padding-right: 10rpx;
				color: #333;
				font-size: 32rpx;
			}

			.inp_box {
				flex: 1;

				input {
					color: #333;
					width: 100%;
					text-align: right;
				}
			}

			.icon_box {
				height: 40rpx;
				width: 40rpx;
				line-height: 40rpx;
			}
		}
	}
</style>